{% extends 'layout/manage.html' %}
{% block css %}
<style>
    .choose {
        border-left: 2px solid #f90 !important;
    }
</style>
{% endblock %}
{% block content %}
<div class="container clearfix" style="margin-top: 20px;">
    <div class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-heading" style="background-color:transparent;font-weight: bold;">
                个人中心
            </div>
            <div class="list-group" style="border-radius: 0">
                <div>
                    <a href="#" class="list-group-item"  onclick="alert('功能未开发'); return false;">我的资料</a>
                    <a href="{% url 'setting_password' project_id=request.tracer.project.id %}" class="list-group-item">修改密码</a>
                    <a href="{% url 'setting_delete'  project_id=request.tracer.project.id %}"
                       class="list-group-item ">删除项目</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-9">
        <div class="panel panel-default">
            <div class="panel-heading"><i class="fa fa-address-card-o" aria-hidden="true"></i> 我的资料</div>
            <div class="panel-body">

                <form class="form-horizontal" method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        <label class="col-sm-2 control-label">旧密码</label>
                        <div class="col-sm-5">
                            <input type="password" class="form-control" placeholder="请输入旧密码" name="old_password">
                            <span class="error-msg text-danger">{{ form.old_password.errors }}</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">新密码</label>
                        <div class="col-sm-5">
                            <input type="password" class="form-control" placeholder="请输入新密码" name="new_password">
                            <span class="error-msg text-danger">{{ form.new_password.errors }}</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">确认新密码</label>
                        <div class="col-sm-5">
                            <input type="password" class="form-control" placeholder="请再次输入新密码"
                                   name="confirm_password">
                            <span class="error-msg text-danger">{{ form.confirm_password.errors }}</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-5">
                            <input type="submit" class="btn btn-primary" value="提交">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var SETTING_PASSWORD_URL = "{% url 'setting_delete'  project_id=request.tracer.project.id %}";
    document.getElementById('not-developed').addEventListener('click', function(event) {
        event.preventDefault();
        alert('功能未开发');
    });
    $(document).ready(function() {
        $('#password-form').on('submit', function(event) {
            event.preventDefault(); // 阻止表单的默认提交
            var formData = $(this).serialize(); // 获取表单数据
            $.ajax({
                url: SETTING_PASSWORD_URL, // 替换为你的视图名称
                type: 'POST',
                data: formData,
                success: function(response) {
                    if (response.status) {
                        // 成功处理
                        alert('密码修改成功');
                        // 你可以在这里重定向或更新页面
                    } else {
                        // 显示错误信息
                        $.each(response.errors, function(key, value) {
                            $('#error_' + key).text(value[0]); // 显示错误信息
                        });
                    }
                },
                error: function(xhr, status, error) {
                    // 错误处理
                    console.error('AJAX请求失败:', status, error);
                }
            });
        });
    });
</script>
